<template>
  <!--  @mouseover="showTip=true" @mouseleave="showTip=false"-->
  <div :style="{width:width+'px'}" class="processBox" >
    <div v-for="n in colsActive" :key="n" ref="qg" :style="{width:colWidth+'px',marginRight:colWidth+'px',backgroundColor:bgColor}" class="qg" />
  </div>
</template>

<script>
export default {
  props: {
    // 注：此宽度按cols进行等分！若进度条间距不均衡，可适当修改值。
    width: {
      type: Number,
      default: 600
    },
    // 等分竖条
    cols: {
      type: Number,
      default: 40
    },
    // 百分比
    percent: {
      type: Number,
      default: 0
    },
    // 背景色
    bgColor: {
      type: String,
      default: '#37b588'
    },
  },
  data() {
    return {
      showTip: true
    }
  },
  computed: {
    // 激活的竖条
    colsActive() {
      return parseInt(this.percent / (100 / this.cols))
    },
 
    // 单个竖条宽度
    colWidth() {
      return (this.width / this.cols / 2)
    }
  }
 
}
</script>

<style scoped lang="less">
    .processBox {
        height: 11px;
        border-radius: 8px;
        overflow: hidden;
        background-color: rgba(0, 147, 167, .32);
        display: flex;
        align-items: center;
      .qgBox,
      .bgBox {
        display: flex;
        /* 默认就是下面此属性
        flex-wrap:nowrap; //不换行
        justify-content: flex-start ; //左对齐
        */
      }
        .bgBox {
            position: relative;
            height: 11px;
        }
        .qgBox {
            position: absolute;
            top:0;
            left:0;
            width:100%;
            height: 100%;
        }
        .bg {
          display: none;
        }
        .bg,
        .qg {
              margin-bottom: 1px;
            height:100%;
            transform: skewX(-45deg); //倾斜
        }
 
      .active{
        color: red;
      }
    }
   /deep/ .popper__arrow::after{
      border-top-color:#ccc
    }
</style>
 
<style lang="less">
// 全局
 .processTip, .processTip1{
      //position: relative;
      padding:5px 20px !important;
      color: #64ae8f;
      font-weight: bold;
      font-size: 15px;
      //border-radius: 50%;
      width: 95px;
      text-align: center;
      border-radius: 0;
      border: 1px solid  #ccc !important;
      box-shadow: 0 2px 5px 2px rgba(0,0,0,0.12);
      top: 125px !important;
  }
  .processTip1{
    color: #da5953;
  }
  .el-tooltip__popper[x-placement^=top] .popper__arrow::after {
    border-top-color: #ccc !important;
  }
  .el-tooltip__popper[x-placement^=top] .popper__arrow{
    border-top-color: #ccc !important;
  }
 
</style>